<template>
  <div>
    <!-- 非重箱绑定 2018/3/7 11:44 zhangQ -->

    <Form ref="tabParam" :model="tabParam" label-position="right" inline>
      <FormItem>
        <Button type="primary" @click="exportData">
          <Icon type="ios-download-outline"></Icon>
          导出原始数据
        </Button>
      </FormItem>
      <FormItem label="时间：">
        <DatePicker v-model="timeVal" type="daterange" :options="timeOptions" split-panels placeholder="时间" format="yyyy年MM月dd日" style="width: 230px">
        </DatePicker>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="handleSearch" icon="ios-search">
          <Icon type="ios-download-outline"></Icon>
          搜索
        </Button>
      </FormItem>
    </Form>

    <tablePage ref="containerTab" :api="getInfoForNotLoadContain" :param="tabParam" sortName="time" sort-type="desc">
      <template slot-scope="props">
        <Table :columns="containerColumn" :data="props.data"></Table>
      </template>
    </tablePage>
  </div>
</template>

<script>
  import tablePage from '@components/table/tablePage.vue'
  import { getInfoForNotLoadContain } from '@api/backEnd/station'
  import moment from 'moment'
  import { exportUtil } from '@/vendor/exportInvoke'

  export default {
    name: 'no-load-containers',
    data () {
      let tabParam = {
        haveyOrEmpty: '0',
        inOrOut: '1',
        trainOrTruck: 0,
        startTime: moment().subtract(6, 'days').format('YYYY-MM-DD') + ' 00:00:00',
        endTime: moment().format('YYYY-MM-DD') + ' 23:59:59'
      }
      let timeOptions = {
        shortcuts: [
          {
            text: '最近一周 ',
            value () {
              let end = new Date()
              let start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              return [start, end]
            }
          },
          {
            text: '最近一月',
            value () {
              let end = new Date()
              let start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              return [start, end]
            }
          },
          {
            text: '最近三个月',
            value () {
              let end = new Date()
              let start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              return [start, end]
            }
          }
        ]
      }
      let timeVal = [tabParam.startTime, tabParam.endTime]
      let containerColumn = [
        {
          title: '车号',
          key: 'truck_no',
          width: 155,
          align: 'center'
        },
        {
          title: '车队名称',
          ellipsis: true,
          align: 'center',
          key: 'fleet_name'
        },
        {
          title: '司机名称',
          ellipsis: true,
          align: 'center',
          key: 'driver_name'
        },
        {
          title: '车型',
          align: 'center',
          key: 'truck_type'
        },
        {
          title: '集装箱号',
          ellipsis: true,
          align: 'center',
          key: 'container_no'
        },
        // 状态
        {
          title: '状态',
          ellipsis: true,
          align: 'center',
          width: 150,
          render: (h, params) => {
            let item = params.row
            let txt = ''
            let color = ''
            if (+item.in_or_out === 1 && +item.heavy_or_empty === 1) {
              txt = '重箱出场'
              color = 'green'
            } else if (+item.in_or_out === 1 && +item.heavy_or_empty === 0) {
              txt = '空箱出场'
              color = 'yellow'
            } else if (+item.in_or_out === 2 && +item.heavy_or_empty === 1) {
              txt = '重箱入场'
              color = 'blue'
            } else if (+item.in_or_out === 2 && +item.heavy_or_empty === 0) {
              txt = '空箱入场'
              color = 'red'
            }
            return (<tag type="dot" color={color}>{txt}</tag>)
          }
        },
        {
          title: '时间',
          ellipsis: true,
          align: 'center',
          render: (h, params) => {
            let thisdata = params.row.time
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        }
      ]
      let datas = { timeVal, tabParam, containerColumn, getInfoForNotLoadContain, timeOptions }
      return datas
    },
    watch: {
      timeVal (val) {
        if (val && val[0] && val[1]) {
          this.tabParam.startTime = moment(val[0]).format('YYYY-MM-DD') + ' 00:00:00'
          this.tabParam.endTime = moment(val[1]).format('YYYY-MM-DD') + ' 23:59:59'
        } else {
          delete this.tabParam.startTime
          delete this.tabParam.endTime
        }
      }
    },
    methods: {
      handleSearch () {
        this.$refs['containerTab'].dataRefresh()
      },
      exportData () {
        let param = Object.assign({}, this.tabParam)
        param.page = 1
        param.pageSize = 100000
        getInfoForNotLoadContain(param).then(res => {
          if (res.data.isSuccess === 1) {
            let resDate = res.data.data.rows
            // let resColumns = JSON.parse(JSON.stringify(this.stationColumn))
            let result = this.fasetJson(resDate)
            exportUtil.export2Excel('业务报表', result.columns, result.data)
          }
        })
      },
      fasetJson (tabData) {
        let result = {
          columns: [{ title: '车号', key: 'truck_no' },
            { title: '车队名称', key: 'fleet_name' },
            { title: '司机名称', key: 'driver_name' },
            { title: '车型', key: 'truck_type' },
            { title: '集装箱号', key: 'container_no' },
            { title: '状态', key: 'state' },
            { title: '时间', key: 'time' }],
          data: []
        }
        // let indexCount = 0
        tabData.forEach((item) => {
          item.time = item.time ? moment(item.time).format('YYYY-MM-DD HH:mm') : ''
          let txt = ''
          if (+item.in_or_out === 1 && +item.heavy_or_empty === 1) {
            txt = '重箱出场'
          } else if (+item.in_or_out === 1 && +item.heavy_or_empty === 0) {
            txt = '空箱出场'
          } else if (+item.in_or_out === 2 && +item.heavy_or_empty === 1) {
            txt = '重箱入场'
          } else if (+item.in_or_out === 2 && +item.heavy_or_empty === 0) {
            txt = '空箱入场'
          }
          item.state = txt
          result.data.push(item)
          // indexCount++
        })
        // console.log(indexCount)
        return result
      }
    },
    components: { tablePage }
  }
</script>

<style scoped>

</style>
